<template>
  <div>
    <quill-editor :content="post.content"
                  :options="editorOption"
                  @change="onEditorChange($event)">
    </quill-editor>
    <b-container class="mt-2">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="post.title"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select placeholder="请选择文章分类" v-model="post.cid">
          <el-option v-for="(item,i) in catalog" :key="i" :label="item.name" :value="item.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公开">
        <el-switch v-model="post.status"></el-switch>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="post.descr"></el-input>
      </el-form-item>
      <el-form-item>
       <b-container class="text-center"><el-button type="success" @click="save">立即创建</el-button></b-container>
      </el-form-item>
    </el-form>
    </b-container>
    <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">}</span>  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import Prism from 'prismjs'
import { Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/imageResize', ImageResize)
export default {
  data () {
    return {
      post: {
        title: '',
        descr: '',
        content: '<pre class="ql-syntax" spellcheck="false">function () {var a = 1} </pre><pre class="ql-syntax" spellcheck="false">function () {var a = 1} </pre>',
        admin: 'XiaoRan',
        status: false,
        cid: ''
      },
      catalog: {},
      cid: {},
      editorOption: {
        modules: {
          syntax: false,
          ImageExtend: {
            loading: true,
            name: 'file',
            action: 'http://blog.66zx.top/api/imgPost',
            response: (res) => {
              console.log(res)
              return res.data
            }
          },
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
        // some quill options
      }
    }
  },
  // manually control the data synchronization
  // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
  methods: {
    onEditorBlur (quill) {
    },
    onEditorFocus (quill) {
    },
    onEditorReady (quill) {
    },
    onEditorChange ({ quill, html, text }) {
      this.post.content = html
    },
    save: function () {
      // console.log(JSON.stringify(this.post))
      const data = new FormData()
      data.append('title', this.post.title)
      data.append('descr', this.post.descr)
      this.highLight()
      data.append('content', this.post.content)
      data.append('admin', this.post.admin)
      data.append('cid', this.post.cid)
      data.append('status', this.post.status === true ? 1 : 0)
      this.axios.post('addPost', data)
    },
    getCatalog: async function () {
      const rst = await this.axios.get('getCatalog')
      this.catalog = JSON.parse(rst.data.data)
    },
    highLight: function () {
      var el = document.createElement('html')
      el.innerHTML = this.post.content
      var list = el.getElementsByTagName('pre')
      for (var i = 0; i < list.length; i++) {
        const text = list[i].innerText
        const html = Prism.highlight(text, Prism.languages.javascript, 'javascript')
        this.post.content = this.post.content.replace(text, html)
      }
      // console.log(el.getElementsByTagName('pre')[0].innerText)
      // console.log(html)
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted () {
    this.getCatalog()
  }
}
</script>

<style scoped>
</style>
